<template>
  <div class="resource-list-wrap">
    <el-form :inline="true" label-width="80px" class="query-form lineHeight32" @submit.native.prevent>
      <el-form-item label="资源平台">
        <el-select
          :value="queryForm.platformType"
          :clearable="true"
          size="small"
          placeholder="资源平台"
          class="changeStatus has-search-btn-input"
          popper-class="global-select-down"
          @change="selectChange($event, 'platformType')"
        >
          <el-option label="全部" value="" />
          <el-option
            v-for="item in resourcePlatforms"
            :key="item.id"
            :label="item.value"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="账号归属">
        <el-select
          :value="queryForm.accountBelong"
          :clearable="true"
          size="small"
          placeholder="账号归属"
          popper-class="global-select-down"
          class="changeStatus has-search-btn-input"
          @change="selectChange($event, 'accountBelong')"
        >
          <el-option label="全部" value="" />
          <el-option
            v-for="item in accountBelongs"
            :key="item.id"
            :label="item.value"
            :value="item.id"
          />
        </el-select>
      </el-form-item> -->
      <el-form-item label="所属经营体">
        <el-cascader
          v-model="queryForm.attributionMatrix"
          :show-all-levels="false"
          :options="deptTreeList"
          :props="{
            emitPath:false,
            value: 'id',
            label: 'name',
            checkStrictly: true,
            multiple: false,
          }"
          popper-class="tag-overflow"
          placeholder="所属经营体"
          size="small"
          collapse-tags
          filterable
          clearable
        />
      </el-form-item>
      <el-form-item class="has-search-btn-input" label="资源名称">
        <el-input
          :value="queryForm.resourceName"
          :clearable="true"
          placeholder="请输入资源名称"
          name="resourceName"
          type="text"
          maxlength="50"
          @clear="clearInput('resourceName')"
          @input="textInputChange($event, 'resourceName')"
          @blur="resourceNameBlur"
          @keyup.enter.native="queryClick"
        >
          <!-- <div slot="suffix" class="search-btn" @click="queryClick">搜索</div> -->
        </el-input>
      </el-form-item>
      <el-form-item class="has-search-btn-input" label="执行人">
        <user-select
          ref="userSelect"
          :user-id="queryForm.executorId"
          :default-proposer-list="defaultProposerList"
          :user-select-class-name="userSelectClassName"
          @change="selectChange($event, 'executorId')"
        />
      </el-form-item>
    </el-form>
    <div class="query-button">
      <el-button style="width:120px;padding: 0;" type="primary" size="small" @click="queryClick">查询</el-button>
      <el-button style="width:64px;padding: 0;" type="info" size="small" @click="queryEmpty">重置</el-button>
    </div>
    <Title font-size="18px" title="资源列表" style="margin-bottom: 12px"/>
    <div v-if="resourceList.items.length === 0" class="list-empty">暂无数据</div>
    <el-table
      v-loading="resourceListLoading"
      v-if="resourceList.items.length > 0"
      ref="resourceTable"
      :data="resourceList.items"
      class="table-fixed"
      row-key="id"
      element-loading-text="加载中..."
      empty-text="暂无数据"
      header-cell-class-name="order-data-header-cell"
      fit
      hightlight-current-row
    >
      <el-table-column :render-header="renderHeader" :width="20" label>
        <template slot-scope="scope">
          <el-checkbox :value="isChecked(scope.row.id)" @change="checkboxClick($event, scope.row)" />
        </template>
      </el-table-column>
      <el-table-column label="全选展示当前页资源预约概况" width="180" class="allcheck">
        <template slot-scope="scope">
          <resource-item :item="scope.row" @create="createSubcribe" />
        </template>
      </el-table-column>
    </el-table>
    <div class="flex" />
    <el-pagination
      v-if="resourceList.items.length > 0"
      :current-page="resourceList.page"
      :page-size="resourceList.perPage"
      :total="resourceList.total"
      :pager-count="5"
      background
      small
      layout="prev, pager, next"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
<script>
import ResourceItem from '@/components/Subcribe/ResourceItem.vue';
import Title from '@/components/Title';
import UserSelect from '@/components/UserSelect';
import ClearBtn from '@/components/Common/ClearBtn';
import { mapState } from 'vuex';

export default {
  name: 'ResourceList',
  components: { ResourceItem, Title, UserSelect, ClearBtn },
  props: {
    userSelectClassName: {
      type: String,
      default: ''
    },
    defaultProposerList: {
      type: Array,
      default: () => []
    },
    resourcePlatforms: {
      type: Array,
      default: () => {
        return [];
      }
    },
    // accountBelongs: {
    //   type: Array,
    //   default: () => {
    //     return [];
    //   }
    // },
    deptTreeList: {
      type: Array,
      default: () => {
        return [];
      }
    },
    resourceList: {
      type: Object,
      default: () => {
        return null;
      }
    },
    selectResourceIds: {
      type: Array,
      default: () => {
        return [];
      }
    },
    queryForm: {
      type: Object,
      default: () => {
        return {
          platformType: '',
          // accountBelong: '',
          resourceName: '',
          executorId: '',
          attributionMatrix: ''
        };
      }
    },
    resourceListLoading: {
      type: Boolean,
      default: false
    },
    allchecked: {
      type: Boolean,
      default: false
    },
    indeterminate: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  methods: {
    // 资源列表是否选中逻辑
    renderHeader(h, { column, $index }) {
      return h('span', {}, [
        h('el-checkbox', {
          props: {
            value: this.allchecked,
            indeterminate: this.indeterminate
          },
          on: {
            change: this.updateAllSelected
          },
          style: {
            display: this.resourceList.items.length > 0 ? 'block' : 'none'
          }
        })
      ]);
    },
    // 是否选中
    isChecked(id) {
      return this.selectResourceIds.indexOf(id) >= 0;
    },
    updateAllSelected(e) {
      this.$emit('updateAllSelected', e);
    },
    checkboxClick(ischeck, item) {
      this.$emit('checkboxClick', { ischeck, item });
    },
    createSubcribe(item) {
      this.$emit('createSubcribe', item);
    },
    handleSizeChange(val) {
      this.$emit('handleSizeChange', val);
    },
    handleCurrentChange(toPage) {
      this.$emit('handleCurrentChange', toPage);
    },
    selectChange(type, prop) {
      // console.log(type, prop);
      const queryForm = { ...this.queryForm };
      queryForm[prop] = type;
      this.$emit('update:queryForm', { queryForm, isSearch: true });
    },
    textInputChange(text, prop) {
      const queryForm = { ...this.queryForm };
      queryForm[prop] = text;
      this.$emit('update:queryForm', { queryForm, isSearch: false });
    },
    clearInput(prop) {
      const queryForm = { ...this.queryForm };
      queryForm[prop] = '';
      this.$emit('update:queryForm', { queryForm, isSearch: false });
      this.queryClick();
    },
    resourceNameBlur() {
      const str = this.queryForm.resourceName.replace(/(^\s*)|(\s*$)/g, '');
      const queryForm = { ...this.queryForm };
      queryForm['resourceName'] = str;
      this.$emit('update:queryForm', { queryForm, isSearch: false });
    },
    queryEmpty() {
      this.$emit('queryEmpty');
    },
    queryClick() {
      this.$emit('queryClick');
    }
  }
};
</script>
<style lang="scss" scoped>
.query-button {
  margin-bottom: 32px;
  &.is-mobile {
    margin-bottom: 12px;
  }
}
.list-empty {
  height: 60px;
  font-size: 14px;
  color: #666;
  display: flex;
  justify-content: center;
  align-items: center;
}
.search-btn-style {
  margin-right: 6px;
}
</style>
<style lang="scss">
.resource-list-wrap {
  .el-table__row td:first-child .cell {
    padding-left: 0px !important;
  }
  .el-table_1_column_1  {
    padding-bottom: 0px !important;
  }
  .el-table th{
    padding: 16px 0;
    padding-bottom: 0;
  }
  .el-table td{
    padding: 10px 0;
  }
  .el-table th>.cell {
    padding-left: 0;
  }
  .el-table tr td {
    background-color: #fff !important;
    .cell {
      padding-left: 0;
      padding-right: 0;
    }
  }
  ::v-deep .el-input__clear{
    line-height: 32px;
  }
}
</style>
